<template>
  <div>
    <div>
      <el-input
          size="small"
          style="width: 20%;margin-right: 5px"
          placeholder="添加职称..."
          prefix-icon="el-icon-plus"
          v-model="jl.name"
          >
      </el-input>
      <template>
        <el-select  size="small"
                    style="width: 20%;margin-right: 5px"
                    v-model="jl.titleLevel"
                    placeholder="请选择">
          <el-option
              v-for="item in titleLevels"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
      </template>
      <el-button
          size="mini"
          type="primary"
          @click="Add"
          >
        添加职称
      </el-button>
      <transition name="el-zoom-in-bottom">
        <el-button v-show="this.multipleSelection.length!=0" type="danger" size="mini" @click="complexDel">批量删除</el-button>
      </transition>
    </div>
    <div style="margin-top: 10px">
        <el-table
            :data="jobLevels"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="编号"
              width="70">
          </el-table-column>
          <el-table-column
              prop="name"
              label="职称名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="titleLevel"
              label="职称级别"
              width="150">
          </el-table-column>
          <el-table-column
              prop="createDate"
              width="180"
              label="创建时间/修改时间">
          </el-table-column>
          <el-table-column
              label="是否启用" width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.enabled" type="success" size="small">已启用</el-tag>
              <el-tag v-else type="danger" size="small">未启用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="primary" size="mini" @click="showEditView(scope.row)"  icon="el-icon-edit"></el-button>
                <el-button type="danger" size="mini" @click="Del(scope.row)" icon="el-icon-delete"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <el-dialog
        title="修改职称"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
          <div>
              <el-input  size="small"
                         v-model="updatejl.name"
                         style="width: 60%">
            </el-input>
          </div>
          <div style="margin-top: 10px">
              <el-select  size="small"
                          style="width: 60%"
                          v-model="updatejl.titleLevel"
                          placeholder="请选择">
                <el-option
                    v-for="item in titleLevels"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
          </div>
          <div style="margin-top: 10px">
            <el-switch
                v-model="updatejl.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                inactive-text="禁用">
            </el-switch>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
    <el-button size="mini" type="primary" @click="doUpdate">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "LevelManager",
  data(){
    return{
      jl:{
        name:'',
        titleLevel:'',
      },
      updatejl:{
        name:'',
        titleLevel:'',
        enabled:'',
      },
      titleLevels:[
          '正高级',
          '副高级',
          '中级',
          '初级',
          '员级'
      ],
      jobLevels:[],
      dialogVisible:false,
      show:false,
      multipleSelection: [],
    }
  },
  methods:{
    initJL(){
      this.getRequest("/system/basic/joblevel/").then(resp=>{
        if(resp){
          this.jobLevels=resp;
          this.jl = {
            name: '',
            titleLevel: ''
          }
        }
      })
    },
    Add(){
      if(this.jl.name && this.jl.titleLevel){
        this.postRequest("/system/basic/joblevel/",this.jl).then(resp=>{
          if(resp){
            this.initJL();
          }
        })
      }else {
        this.$message.error("请输入职称名称或职称级别");
      }
    },
    Del(data){
      this.$confirm('此操作将永久删除【'+data.name+'】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/system/basic/joblevel/"+data.id).then(resp=>{
          if(resp){
            this.initJL();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showEditView(data){
        Object.assign(this.updatejl,data);
        this.dialogVisible = true;
    },
    doUpdate(){
      this.putRequest("/system/basic/joblevel/",this.updatejl).then(resp=>{
        if(resp){
          this.initJL();
          this.dialogVisible=false;
        }
      })

    },
    handleSelectionChange(val){
      this.multipleSelection = val
      this.show = true;
    },
    complexDel(){
      this.$confirm('此操作将永久删除这'+this.multipleSelection.length+'条数据，请仔细核对', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?';
        this.multipleSelection.forEach(item=>{
          ids+='ids='+item.id+'&';
        })
        console.log(ids);
        this.deleteRequest("/system/basic/joblevel/"+ids).then(resp=>{
          if(resp){
            this.initJL();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }

  },
  mounted() {
    this.initJL();
  }
}
</script>

<style scoped>

</style>